<template>
  <div class="container">
    <div class="recommend">
      <div class="header">
        <img src="../components/Home/images/likeness.png" style="width: 20px;height: 20px;">
        <span>相关新闻</span>
        <img src="../components/Home/images/刷新.png" style="width: 15px;height: 15px; margin-left: 40px">
        <span class="reflash" @click="changeCommand()">换一换</span>
      </div>
<!--      <ul v-for="item in command" :key="item.id" class="recommend">-->
<!--        <li  @click="test(item.id)">{{item.title}}</li>-->
<!--      </ul>-->
     <el-card class="box-card">
        <div v-for="(item,index) in command" :key="item.id" class="text item ">
          <li  @click="test(item.id)">{{index+1}} {{item.title}}</li>
        </div>
      </el-card>
    </div>

    <div class="left-container" >
        <el-card>
          <h1 style="font-size:36px ;margin-bottom: 10px">{{ list.title }}</h1>
          <span style="display: block;font-size: 18px">{{list.gmtCreate.substring(0,10)}}</span>
          <div v-html="list.content" class="test"></div>
        </el-card>
      <div class="add">

          <div class="dz" @click="getDianZan('zhan')">
            <a href="#"></a><img src="./images/点赞.png" alt="">
            <br/>
            <span >点赞：{{this.dz}}</span>
          </div>
          <div class="sc" @click="getDianZan('fensi')">
            <a href=""></a><img src="./images/收藏.png" alt="">
            <br/>
            <span >收藏:{{this.sc}}</span>
          </div>
          <div class="fx" @click="getDianZan('guanzhu')">
            <a href=""></a><img src="./images/分享.png" alt="">
            <br/>
            <span >分享：{{this.fx}}</span>
          </div>


      </div>
    </div>

    <div class="right-container">
      <div class="hot">
        <div class="header">
          <img src="../components/Home/images/hot-search.png" style="width: 20px;height: 20px;">
          <span>头条新闻</span>
        </div>
        <div class="hot-news">
          <ul v-for="(item,index) in hotList" :key="item.id" class="text item ">
            <li  @click="test(item.id)" ><span :class="{one:index==0,two:index==1,three:index==2}" style="font-size: 14px">{{index+1}}</span> {{item.title}}</li>
          </ul>
        </div>
        <div class="copyright">
          <div class="header">
            <span>©2022</span>
            <span>摘新团队</span>
          </div>
          <div class="team">
                        <span>
                            地&nbsp;&nbsp;址：桂林电子科技大学花江校区
                            <br/>
                            学&nbsp;&nbsp;院：计算机与信息安全学院
                        </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import article from "../api/article"
export default {
  name: "index",
created() {
  this.getById();
},
  data () {
    return {
      num: 1,
      activeIndex: '1',
      key:'',
      list:null,//查询后的接口集合,
      id:'',
      kind:"",
      command:null,
      dz:"",
      sc:"",
      fx:"",
      page:1
    }
  },
  methods: {
    getById(){
      console.log(  this.$route.params.id)
      this.id= this.$route.params.id
      article.getById(this.$route.params.id)
        .then(response=>{
          this.list=response.data.data.article
          this.kind=this.list.kind
          this.getCommand(this.kind,1,3);
        })
    },
    getCommand(kind,page,limit){
      article.KindPageArticle(kind,page,limit)
        .then(response=>{
          this.command=response.data.data.rows
          console.log(response)
          this.getHot()
        })
    },
    changeCommand(){
        this.getCommand(this.kind,this.page%3,3)
        this.page++
    },
    getHot(){
      article.getHot()
        .then(response=>{
          this.hotList=response.data.data.rows
          this.getInfo(this.id);
        })
    },
    count(id){
      article.count(id)
        .then(response=>{
        })
    },
    test(id){
      let routeUrl = this.$router.resolve({
        name: "details",
        params: {id:id},

      });
      this.count(id);
      window.open(routeUrl.href, '_blank');
    },
    getDianZan(kind,id){

      article.dianzan(kind,this.$route.params.id)
        .then(response => {
          this.getInfo(this.$route.params.id)
        })
    },
    getInfo(id){
      article.getInfo(this.$route.params.id)
        .then(response => {
          this.dz = response.data.data.zhan
          this.sc = response.data.data.fensi
          this.fx = response.data.data.guanzhu
        })
    },
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: '请复制以下链接',
        message: h('p', null, [
          h('span', null, 'http://101.33.210.8/#/details/'+this.$route.params.id),
        ]),
        confirmButtonText: '确定',
      })
      article.dianzan("guanzhu")
        .then(response => {
          this.getInfo(this.id)
        })
    },
    shoucang(){

      var ctrl=(navigator.userAgent.toLowerCase()).indexOf('mac')!=-1?'Command/Cmd': 'CTRL';
      try{
        window.external.addFavorite($(".shostCopy").attr('copyUrl'), $(this).attr('collectName'));
      }catch (e){
        try{
          window.sidebar.addPanel($(this).attr('collectName'), $(".shostCopy").attr('copyUrl'), "");
        }catch (e){
          alert('您可以先复制然后通过快捷键' + ctrl + ' + D 加入到收藏夹');
        }
      }
      article.dianzan("fensi")
        .then(response => {
          this.getInfo(this.id)
        })
    },

  },
}
</script>

<style scoped>
.one{
  color: #A82E2E;
}
.two{
  color: #F04142;
}
.three{
  color:#FF9A03 ;
}
.add{
  margin-top: 50px;
  width: 820px;
  height: 120px;
}
.add div{
  width: 32.5%;
  /*background-color: red;*/
  display: inline-block;
  text-align: center;
}
.add a{
  font-size: 20px;
}
  /*.add .sc{*/
/*  padding-left: 200px;*/
/*  padding-right:200px;*/
/*  width: 300px;*/
/*}*/
.test >>> p{
  text-indent: 2em;
  font-size: 18px;
  margin: 10px 0;
}
.test >>> img{
  width: 90%;
  display: block;
  margin: 10px auto 10px auto;
}
.container{
  width: 1080px;
  /*height: 1800px;*/
  background-color: #1d7db1;
  margin-left: auto;
  margin-right: auto;
}
.recommend {
  position: fixed;
  top: 300px;
  left: 100px;
}
.recommend .header{
  margin-bottom: 10px;
}
.recommend li{
  line-height: 30px;
  width: 220px;
  white-space:normal;
}
.recommend a{
  font-size: 10px;
  color: #150606;
}
.container .left-container{
  /*background-color: pink;*/
  height: 100%;
  width: 75%;
  margin-top: 0px;
  float: left;
}
.container .left-container .nav{
  width: 100%;
  /*background-color: skyblue;*/
  display: block;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #FFFFFF;
  /*position: fixed;*/
}
.container .left-container li{
  float: left;
  /*color: #595a5a;*/
  width: 70px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin: 5px 15px;
  font-size: 18px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
.container .left-container li a{
  color: #393636;
}
.container .left-container li a:hover{
  color: red;
}
.container .left-container .more div{
  display: none;
  width: 280px;
  position: absolute;
  top: 50px;
  left: 520px;
  background-color: aquamarine;
  z-index: 100;
  border-radius: 5px;
}
.container .left-container .more:hover div{
  display: block;
}
.container .left-container .more div li{
  float: left;
  background-color: green;
  width: 50px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin: 5px 10px;
  font-size: 16px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
.container .left-container .main{
  width: 100%;
  height: 80%;
  /*background-color: #974BE0;*/
  display: block;
  margin-top: 50px;
}
.container .left-container .main .news{
  width: 95%;
  /*background-color: #ef3f52;*/
  height: 60px;
  margin-left: 30px;
}
.container .left-container .main .news h2{
  font-size: 22px;
  font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
  color: #666;
  margin-top: 20px;
}
.container .left-container .main .news .detail{
  font-size: 14px;
  margin-top: 8px;
}
.container .left-container .main .news .detail .top{
  color: red;
}


/*右边*/
.container .right-container{
  float: left;
  /*background-color: red;*/
  width: 20%;
  margin-top: 20px;

}
.container .right-container .detail{
  width: 240px;
  height: 180px;
  background-color:#FAFAFA;
  border-radius: 20px;
  margin-top: 20px;
  /*position: fixed;*/
}
.container .right-container .user{
  width: 120px;
  height: 60px;
  border-radius: 20px;
  margin-top: 10px;
  text-align: center;
  line-height: 60px;
  display: inline-block;
  margin-left: 10px;
}
.container .right-container .user img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: -10px;
  vertical-align: middle
}
.container .right-container .user span{
  font-size: 20px;
}
.container .right-container .article{
  margin-top: 5px;
  text-align: center;
  display: block;
}
.container .right-container .article li{
  float: left;
  width: 60px;
  height: 40px;
  background-color:#fff;
  margin: 0 10px;
  border-radius: 8px;
}
.container .right-container .detail .thing{
  margin-top: 60px;
  width: 100%;
  text-align: center;
  background-color:#fff;
}
.container .right-container .thing img{
  width: 20px;
  height: 20px;
}
.container .right-container .thing li{
  float: left;
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border-radius: 8px;
}
.container .right-container .hot{
  margin-top: 220px;
  position: fixed;
  right:400px;
}
.container .right-container .hot .header{
  font-size: 18px;
  margin-bottom: 10px;
  margin-left: 10px;

}
.container .right-container .hot .header .reflash{
  font-size: 14px;

}
.container .right-container .hot .hot-news{
  width: 100%
}
.container .right-container .hot li{
  /*width: 100%;*/
  /*height: 30px;*/
  margin-left: 10px;
  line-height: 30px;
  width: 220px;
  white-space:normal;
}
.container .right-container .hot li a{
  color: black;
  font-size: 12px;
  margin-left: 5px;
}
.container .right-container .copyright{
  margin-top: 20px;
}
.container .right-container .copyright .team{
  margin-left: 10px;
}
/*reset*/
*{padding: 0;margin: 0;}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}
a:hover{
  color: red;
}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
html, body { height: 100%;  color: #333; font-size: 12px; font-family: "微软雅黑",MicrosoftYaHei;}
a { text-decoration: none; color: #3cf; -webkit-tap-highlight-color: transparent;}
li{list-style: none;}
table{border-collapse: collapse;}
input {outline: medium none;font-family: "微软雅黑",MicrosoftYaHei;font-size: 14px;}
button{font-family:"微软雅黑",MicrosoftYaHei;}
em {font-style: normal;}
.wrap{max-width: 100%;min-height: 100%;overflow: hidden;margin: 0 auto;background: #ccc;}

.left{float: left;}
.right{float: right;}
.clear{clear:both;}
.red{color: #f60;}

.ececk_warning{
  font-size: 13px;
  color: red;
  width: 300px;
  margin: 0 auto;
  display: none;
}
.recommend li{
  line-height: 30px;
  width: 230px;
  white-space:normal;
}

</style>

